<template>
  <div :class="{ 'menu-content': !isCollapse }" class="menu-root">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :unique-opened="true"
        :default-openeds="defaultMenu"
        active-text-color="#009688"
        background-color="#fff"
        text-color="#666"
        router
        :collapse="isCollapse"
      >
        <template v-for="item in menus">
          <el-sub-menu
            :key="item.id"
            v-if="item.children && item.children.length > 0"
            :index="item.id"
          >
            <template #title>
              <i class="iconfont" :class="item.icon" />
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="subItem in item.children"
              :index="subItem.router"
              :key="subItem.router"
              @click="selectMenu(subItem.router)"
              ><i class="iconfont" :class="subItem.icon" />
              <span  style="margin-left: 5px;">{{ subItem.name }}</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item
            :key="item.router"
            v-else
            :index="item.router"
            @click="selectMenu(item.router)"
          >
            <i class="iconfont" :class="item.icon" />
            <span>{{ item.name }}</span></el-menu-item
          >
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  onMounted,
  toRefs,
  watch,
  computed,
} from "vue";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  name: "Menu",
  props: {
    isCollapse: Boolean,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      menus: [
        // {
        //   id: 1,
        //   router: "/console",
        //   icon: "",
        //   name: "工作台",
        // },
        // {
        //   id: 2,
        //   children: [{ router: "/home", name: "home2", icon: "" }],
        //   icon: "",
        //   name: "home1",
        // },
        // {
        //   id: 1,
        //   router: "/proview",
        //   icon: "",
        //   name: "proview",
        // },
        {
          id: 2,
          router: "/product",
          icon: "icon-chanpinguanli",
          name: "产品介绍",
        },
        {
          id: 3,
          router: "/service",
          icon: "icon-fuwu2",
          name: "服务内容",
        },
        {
          id: 4,
          router: "/case",
          icon: "icon-a-ziyuan539",
          name: "典型案例",
        },
        {
          id: 5,
          router: "/download",
          icon: "icon-xiazai2",
          name: "下载中心",
        },
        {
          id: 6,
          router: "/about",
          icon: "icon-moban",
          name: "关于我们",
        },
        {
          id: 7,
          router: "/award",
          icon: "icon-rongyubiaozhang",
          name: "荣誉资质",
        },
        {
          id: 8,
          router: "/partner",
          icon: "icon-cooperation-full2",
          name: "合作伙伴",
        },
      ],
      title: "系统名称",
      logo: "./images/logo.png",
      defaultMenu: [],
    });
    const selectMenu = (e: any) => {
      router.push(e);
    };
    watch(
      () => route.path,
      () => {}
    );
    // 默认激活的菜单
    const activeMenu = computed(() => {
      const path = route.path;
      let activePath = path;
      if (path !== undefined && path.lastIndexOf("/") > 0) {
        const tmpPath = path.substring(1, path.length);
        activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
      }
      return activePath;
    });
    onMounted(() => {});
    return {
      ...toRefs(state),
      selectMenu,
      activeMenu,
    };
  },
});
</script>
<style lang="scss"></style>
<style scoped lang="scss">
.scrollbar-wrapper {
  overflow-x: hidden !important;
}
.el-menu-item {
  color: #666 !important;
  background-color: #fff !important;
  justify-content: center;
  border-left: solid 5px transparent;
}
.el-menu .el-menu-item:hover {
  color: (var(--el-color-primary)) !important;
  background-color: #e6f5f3 !important;
  border-left: solid 5px var(--el-color-primary);
}
.el-menu-item.is-active {
  color: (var(--el-color-primary)) !important;
  background-color: #e6f5f3 !important;
  border-left: solid 5px var(--el-color-primary);
}
.el-menu .el-sub-menu__title:hover {
  color: (var(--el-color-primary)) !important;
  background-color: #e6f5f3 !important;
  border-left: solid 5px var(--el-color-primary);
}
.el-sub-menu .el-menu {
  color: #666 !important;
  background-color: #fff !important;
  border-left: solid 5px transparent;
}
.el-menu .el-sub-menu .el-menu-item:hover {
  color: (var(--el-color-primary)) !important;
  background-color: #e6f5f3 !important;
  border-left: solid 5px transparent;
}
.el-menu-item.is-active {
  color: (var(--el-color-primary)) !important;
  background-color: #e6f5f3;
  border-left: solid 5px var(--el-color-primary);
}
.el-menu-item:hover {
  color: (var(--el-color-primary)) !important;
  background-color: #e6f5f3;
  border-left: solid 5px transparent;
}
.scrollbar-wrapper {
  height: 100%;
  display: flex;
  .el-menu {
    height: 100%;
    flex: 1;
    .iconfont {
      font-size: 20px;
      margin-right: 10px;
    }
  }
}
.menu-content {
  width: 200px;
}
.el-menu {
  background-color: #fff;
  color: black;
}
</style>
